<#include "/common/defaultEngine.html"/>
<@pageTheme mark="${config.optimize()?string('true', 'false')}">
<@header title="卡片表格案例" bodyClass="gray-bg animated fadeInRight" isAnimation=false libs=["table"]/>
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <@f.form id="user-form">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>${i18n("登陆账号")}</label>：<input class="form-control" type="text" name="username"/>
                        </li>
                        <li>
                            ${i18n("邮箱")}: <input class="form-control" type="text" name="email"/>
                        </li>
                        <li>
                            ${i18n("手机号码")}: <input class="form-control"  type="text" name="mobile"/>
                        </li>
                        <li>
                            <label>${i18n("机构查询")}</label>：
                            <div class="control-div width-150">
                                <@f.treeselect name="compId" boxTitle="请选择归属机构" url="sys/comp/treeData"
                                expandLevel=true
                                placeholder="请选择上级机构"/>
                            </div>
                        </li>
                        <li>
                            <label>${i18n("用户状态")}</label>：
                            <@f.select name="status" dictType="sys_normal_disable" blankValue="" blankLabel="所有"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;${i18n("查询")}</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="opt.form.reset()"><i class="fa fa-refresh"></i>&nbsp;${i18n("重置")}</a>
                        </li>
                    </ul>
                </div>
            </@f.form>
        </div>
        <@table id="bootstrap-table">
            <@shiro.hasPermission name="sys:user:add">
                <a class="btn btn-success" onclick="opt.operate.addTab()"><i class="fa fa-plus"></i>&nbsp;${i18n("新增")}</a>
            </@shiro.hasPermission>
            <@shiro.hasPermission name="sys:user:edit">
                <a class="btn btn-primary single disabled" onclick="opt.operate.edit()"><i class="fa fa-pencil-square-o"></i>&nbsp;${i18n("修改")}</a>
            </@shiro.hasPermission>
            <@shiro.hasPermission name="sys:user:del">
                <a class="btn btn-danger multiple disabled" onclick="opt.operate.delAll()">
                    <i class="fa fa-remove"></i> ${i18n("删除")}
                </a>
            </@shiro.hasPermission>
        </@table>
    </div>
</div>
<@footer>
<script type="text/javascript">
    var editFlag = "${permission.hasPermi('sys:user:edit')}";
    var delFlag = "${permission.hasPermi('sys:user:del')}";
    var resetPwdFlag = "${permission.hasPermi('sys:user:resetPwd')}";
    var visible = ${permission.isPermitteds("sys:user:edit,sys:user:del,sys:user:resetPwd")?string('true', 'false')};
    var prefix = baseURL + 'sys/user';
    // 自定义表格视图切换记住我,使用当前页面URLBase64作为KEY
    var urlBase64 = btoa(opt.common.encodeUrl(window.location.href.substr(basePath.length)));

    $(function() {
        initTable();
    });

    /****自定义表格案例 与 行明细案例**/
    function initTable() {
    
    	var showCustomTalbe = opt.storage.get(urlBase64) || true;
        showCustomTalbe = (typeof showCustomTalbe === 'boolean') ?
            showCustomTalbe: (showCustomTalbe === 'true');
            
        /* 初始表格对象 */
        var options = {
            url: prefix + "/list",
            addUrl: prefix + "/add",
            editUrl: prefix + "/edit/{id}",
            delUrl: prefix + "/del",
            viewUrl: prefix + "/view/{id}",
            exportUrl:  prefix + "/export",
            //showSearch: true,
            showColumns: false,
            pageSize: 12,
            pageList: [12, 24, 36],
            sortName: "createTime",
            //固定高度
            height: function(){ return $(window).height() - 100},
            striped: true, // 表格斑马条纹
            uniqueId: "id", /* 唯一ID */

            // --- 是否行明细内容
            detailView: true,
            detailFormatter: detailFormatter,
            // ------

            // --- 是否开启自定义表格/ 开启之后默认\初始显示 自定义表格、可以通过ToolBar工具类 切换 回原始表格
            showCustomView: true, /* 自定义表格*/
            // 不填默认切换图标
            //customVIcon: 'fa fa-bar-chart-o',
            // 显示图标文字 不填默认无文字
            customTxt: ' ${i18n("视图切换")}',
            // 初始化显示表格 默认false 显示自定义
            showCustomTalbe: showCustomTalbe,
            // 点击右上角视图切换按钮回调事件 -- 配合 showCustomTalbe 属性可以实现 点击切换视图记住我功能.下次再打开本页面会显示上次视图。
            // 返回 showCustomTalbe 值
            onCustom: function(args){
            	//保存状态
                opt.storage.set(urlBase64,!args);
            },
            customViewFormatter: customViewFormatter,/* 自定义表格视图函数*/
            // -----

            modalName: "${i18n("用户")}",
            columns:[
                {
                    title: "${i18n("序号")}",width:35, formatter: function (value, row, index) {
                        return $.table.serialNumber(index);
                    }
                },
                {field: 'username', title: "${i18n("账号")}",formatter: function(value, row, index){
                        return '<a class="tb-view" onclick="opt.operate.view(\''+row.id+'\',editFlag,opt.operate.edit)">'+value+'</a>';
                    }
                },
                {field: 'name', title:  "${i18n("姓名")}"},
                {field: 'compName', valign: 'middle', title: "${i18n("归属公司")}",formatter: function (value, row, index) {
                        return opt.common.tooltip(value,5);}
                },
                {field: 'deptName', title:  "${i18n("归属机构")}"},
                {field: 'roleName', title: "${i18n("角色")}",formatter: function (value, row, index) {
                        return opt.common.tooltip(value,5);}
                },
                {field: 'email', title:  "${i18n("邮箱")}"},
                {field: 'mobile', title:  "${i18n("手机")}"},
                {
                    field: 'status', title: "${i18n("状态")}", formatter: function (value, row, index) {
                        return opt.common.selectDictLabel('sys_user_show_hide', value);
                    }
                },
                {field: 'createTime', title: "${i18n("创建时间")}"},
                {title: "${i18n("操作")}", align: 'left',visible:visible,class:'action', formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="' + editFlag + '" href="javascript:void(0)" title="${i18n("修改")}" onclick="opt.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i></a> ');
                        if(row.status === "0"){
                            actions.push('<a class="' + delFlag + '" href="javascript:void(0)" title="${i18n("停用")}" onclick="disable(\'' + row.id + '\')"><i class="glyphicon glyphicon-ban-circle"></i></a> ');
                        }else{
                            actions.push('<a class="' + delFlag + '" href="javascript:void(0)" title="${i18n("启用")}" onclick="enable(\'' + row.id + '\')"><i class="glyphicon glyphicon-ok-circle"></i></a> ');
                        }
                        actions.push('<a class="' + delFlag + '" href="javascript:void(0)" title="${i18n("删除")}" onclick="opt.operate.del(\'' + row.id + '\')"><i class="fa fa-trash-o"></i></a> ');
                        var info = "<a  class='btn btn-default btn-xs' onclick=javascript:resetPwd(\'" + row.id + "\');><i class='fa icon-key'></i> ${i18n("重置密码")}</a>&nbsp;";
                        info += "<a  class='btn btn-default btn-xs' onclick=javascript:authRole(\'" + row.id +"\');><i class='fa icon-check'></i> ${i18n("分配角色")}</a>";
                        actions.push('<a tabindex="0" class="' + resetPwdFlag + '" role="button" data-container="body" ' +
                            'data-placement="left" data-toggle="popover" data-html="true" data-trigger="hover" ' +
                            'data-content="'+info+'"><i class="fa fa-chevron-circle-right" title="${i18n("更多操作")}"></i></a>');
                        return actions.join('');
                    }
                }
            ]
        };
        $.table.init(options);
    }

    /**
     * 自定义表格回调函数,可以根据自行项目业务需求自行编写表格显示样式内容
     * @param data 当前页原始 List
     * @returns 返回当前页自定义div
     */
    function customViewFormatter(data){
        console.log('--->>>>返回数据:',data);
        var __html = ['<div class="row m-r-none">'];
        $.each(data, function (i, row) {
            if(opt.common.isNotEmpty(row.avatar)){
                row.avatar = ctx + row.avatar;
            }
            //使用模板引擎调用
            __html.push(opt.template('cardView',row))
        })
        __html.push('</div>');
        console.log('--->>>>自定义DIV:',__html.join(''));
        return __html.join('');
    }

    /**
     * 行明细
     * @param index
     * @param row
     * @returns 返回行明细div
     */
    function detailFormatter(index, row){
        if(opt.common.isNotEmpty(row.avatar)){
            row.avatar = ctx + row.avatar;
        }
        return opt.template('cardView',row);
    }
    
</script>

<!-- 卡片样式 START-->
<style>
    body {
        --bodyBg: #fff;
    }

    .card-list{
        margin: .35em;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .card-list .card-item {
        width: 99.99%;
        margin: .35em;
        background: var(--bodyBg);
        border-radius: 3px;
        display: flex;
        box-shadow: 1px 1px 2px 0 rgb(0 0 0 / 6%);
        transition: all .4s;
    }

    .card-list .card-item:hover{
        text-decoration:none;
        box-shadow:0 10px 20px -10px var(--randomColor,rgba(0,0,0,.15));
        transform:translateY(-3px) scale(1.01)
    }

    .card-list .card-item .img img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 2px solid #fff;
        margin: 1em 1em 0.1em 1em;
        box-shadow: 3px 2px 5px rgb(0 0 0 / 8%);
        transition: all .4s;
    }

    .card-list .card-item .img .name{
        margin: .2em 0 .3em;
        text-align: center;
        font-size: 1.2rem;
    }

    .card-list .card-item .info {
        flex: 1;
        display: inline-block;
        float: right;
        padding: 16px 0;
    }

    .card-list .card-item div .name {
        margin: .2em 0 .3em;
        font-size: 16px;
    }
    .card-list .card-item div p {
        margin: 0;
        padding: 0 1rem;
        transition: text-shadow .4s;
        /*text-align: center;*/
    }

    .card-list .card-item div .desc {
        font-size: 1.3rem;
        line-height: 1.1rem;
        opacity: .8;
        margin-bottom: .9em;
    }
</style>

<!-- 卡片模板-->
<script id="cardView" type="text/template">//<!--
    <div class="col-sm-3">
        <div class="card-list">
            <a href="javascript:;" class="card-item" style="background-color: rgb(203, 234, 250); --randomColor:#CBEAFA; color: rgb(104, 84, 161);">
                <div class="img">
                    <img src="{{d.avatar}}" onerror="imgUserError();" class="no-zoom">
                    <div class="name font-bold">{{d.name}}</div>
                </div>
                <div class="info">
                    <p class="name">
                        {{d.compName}}
                    </p>
                    <p class="desc">
                        {{d.deptName}}
                    </p>
                    <p class="desc">
                    E-mail: {{d.email}}
                    </p>
                    <p class="desc">
                    <abbr>Tel: </abbr>{{d.mobile}}
                    </p>
                </div>
            </a>
        </div>
    </div>
//-->
</script>

<!-- 卡片样式 END-->
</@footer>
</@pageTheme>